import React from 'react'
// 引入相关的hooks
import { useSelector, useDispatch } from 'react-redux'
import {
  increment,
  decrement,
  increment2,
  myNum
} from '@/store/slice/counterSlice'
import { myNum2 } from '@/store/slice/total'
function Counter() {
  // 通过useSelector直接拿到store中定义的value
  const count = useSelector((store) => store.counter.value)
  const store = useSelector((store) => store)
  const myNums = myNum(store)
  const myNum2s = myNum2(store)
  console.log('ceshi value', count)
  // 通过useDispatch 派发事件
  const dispatch = useDispatch()
  // 方法抽离到外部
  const add1 = () => {
    dispatch(increment())
  }
  return (
    <div className="counter">
      <div className="header">
        <h1>counter</h1>
      </div>
      <div style={{ height: '30px', marginBottom: '10px' }}>
        当前数量：{count}
      </div>
      <div style={{ height: '30px', marginBottom: '10px' }}>
        计算数量：{myNums}
      </div>
      <div style={{ height: '30px', marginBottom: '10px' }}>
        计算数量2：{myNum2s}
      </div>
      {/* <button onClick={() => dispatch(increment())}>加1</button> */}
      <button onClick={add1}>加1</button>
      <button onClick={() => dispatch(increment2({ value: 5 }))}>加5</button>
      <button onClick={() => dispatch(decrement())}>减1</button>
    </div>
  )
}

export default Counter
